<template>
  <div>
    <el-autocomplete
      class="inline-input"
      v-model="author"
      :fetch-suggestions="getList"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
      @change="handleChange"
      style="width: 50%"
    ></el-autocomplete>
  </div>
</template>
<script>
import { tbSysUserQuery } from "@/api/admin/user/user-manage.js";
export default {
  data() {
    return {
      restaurants: [],
      author: "",
    };
  },
  props: ["defaultValue"],
  mounted() {
    this.author = this.defaultValue;
  },
  methods: {
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ==
          0
        );
      };
    },
    handleSelect(item) {
      this.$emit("e-sendUserName", item.value);
    },
    handleChange(v) {
      this.$emit("e-sendUserName", v);
    },
    getList(queryString, cb) {
      tbSysUserQuery({ page: 1, limit: 10, userName: queryString }).then(
        (res) => {
          let result = res.data.data;
          result.forEach((v) => {
            v.value = v.userName;
          });
          var restaurants = result;
          var results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      );
    },
  },
};
</script>